<template>
    <div id="dashboard">
      <!-- <h1 class="highlight-title">工单完成情况看板</h1> -->
      <header class="dashboard-header">
    <div class="header-left">
      <h1>数字化生产监控平台</h1>
    </div>
    <div class="header-center">
      <p>{{currentTime}}</p>
    </div>
    
    <div class="header-right">
      
      <p>十四事业部装备中心开发</p>
    </div>
    <div class="header-right">
      <button>全屏</button>
    </div>
    
  </header>

  <div class="divid">
        <el-divider></el-divider>
   </div>

      <!-- 显示近一周的工单产量 -->
      <div class="chart-container">
        <div class="cool-border">
          
        <!-- <h2>近几周产量对比</h2> -->
      <div ref="controlChart1" class="chart2" ></div>
      <div class="data-display">
      <h3>生产数据概览</h3>
      <ul>
        <li>
          <strong>本周工单产量：</strong> 
          <span>{{ weekQuantity }} 件</span>
        </li>
        <li>
          <strong>当前不良品数量：</strong>
          <span>0件</span>
        </li>
        <li>
          <strong>不良品率：</strong>
          <span>0%</span>
        </li>
        <li>
          <strong>下线数量：</strong>
          <span>160 件</span>
        </li>
      </ul>
    </div>
      </div>
      <div class="cool-border">
        <div class="table-container">
    <h3>关键工序记录表</h3>
    <div class="scrollable-table">
      <table class="key-process-table">
        <thead>
          <tr>
            <th>工序号</th>
            <th>工序名称</th>
            <th>生产工单</th>
            <th>生产数量</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in processData.StationDatas" :key="index">
            <td>{{ item.processId }}</td>
            <td>{{ item.processName }}</td>
            <td>{{ item.workOrder }}</td>
            <td>{{ item.productionCount }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
      </div>
      </div>
     
      <div class="divid">
            <el-divider></el-divider>
        </div>
      <!-- ECharts柱形图: 计划产量与实际产量对比 -->
      <div class="chart-container">
        <div class="cool-border">
          
          <div class="chart3" style="height: 400px;">
            <div class style="height: 180px;">
            <div class="module">
             <div class="module-header">
                  <h2>计划数量</h2>
                  </div>
                <div class="module-content">
                   <!-- <p>这里是模块的内容区域。</p> -->
                 <ul>
                  <li>{{ OrderPlanQuantity }}</li>
                  
                 </ul>
                </div>
          </div>
          <div class="module">
             <div class="module-header">
                  <h2>产出数量</h2>
                  </div>
                <div class="module-content">
                   <!-- <p>这里是模块的内容区域。</p> -->
                 <ul>
                  <li>{{ orderOutput }}</li>
                 </ul>
                </div>
          </div>
          </div>
          <div  style="height: 180px;">
          <div class="module">
             <div class="module-header">
                  <h2>在线数量</h2>
                  </div>
                <div class="module-content">
                   <!-- <p>这里是模块的内容区域。</p> -->
                 <ul>
                  <li>53</li>
                 </ul>
                </div>
          </div>
          <div class="module">
             <div class="module-header">
                  <h2>达标数量</h2>
                  </div>
                <div class="module-content">
                   <!-- <p>这里是模块的内容区域。</p> -->
                 <ul>
                  <li>{{ orderOutput }}</li>
                 </ul>
                </div>
          </div>
          </div>
          </div>
          <div ref="controlChart2" class="chart" style="height: 400px;"></div>
         
        </div>
        
      </div>
      
    </div>
  </template>
  
  <script setup lang="ts" name="工单完成情况看板">
  import { ref, onMounted, onUnmounted, reactive } from 'vue';
  import * as echarts  from 'echarts';
  import { getWeekData, getPlanVsActualData } from '/@/api/orderKanban/orderkanban';

  
  const controlChart1 = ref(null);
  const chart1 = ref(null)

  const controlChart2 = ref(null);
  const chart2 = ref(null)

  const currentTime =  ref("")
  const currentOutput = ref("")


  const updateTime = () => {
      const now = new Date();
      currentTime.value = now.toLocaleString("zh-CN", {
        year: "numeric",
        month: "2-digit",
        day: "2-digit",
        hour: "2-digit",
        minute: "2-digit",
        second: "2-digit",
      });
    };

  const ClearLineData = ()=> {
    if (chart1.value != null && chart1.value.dispose) { 
    console.log('卸载曲线图1') 
    chart1.value.dispose();  
    chart1.value = null;  
    }}

  // 响应式数据
  const weekQuantity = ref(0);  // 近一周产量
  const chartOptions = ref({});  // ECharts图表配置
  const OrderPlanQuantity = ref(0);  // 近一周产量
  const orderOutput = ref(0);  // 近一周产量
  
  
  
  // 获取近几周计划与实际产量对比数据
  const fetchPlanVsActualData = async (myChart: any,chartRef:any) => {
    try {
     myChart.value = echarts.init(chartRef.value);
     const data:any = await getPlanVsActualData();
     weekQuantity.value = data.weekcurrent;
     OrderPlanQuantity.value = data.OrderPlanQuantity;
     orderOutput.value = data.orderOutput;
     processData.StationDatas = data.processData.map((x: any) => x);
      console.log('ss',data.weekcurrent)
      const option = {
        title: {
          text: '近四周工单完成情况',
          x: 'center',
          textStyle: {
            fontSize: 18,
            fontWeight: 'bold',
            color: '#ffffff',
          },
          
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['计划产量', '实际产量'],
          top: '10%',
          textStyle: {
          color: '#ffffff',  // 设置图例字体为白色
        },
        },
        xAxis: {
          type: 'category',
          data: data.weeks,  // 假设数据中有 weeks 字段表示周次
          axisLabel: {
          color: '#ffffff',  // 设置图例字体为白色
        },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
          color: '#ffffff',  // 设置图例字体为白色
        },
        },
        series: [
          {
            name: '计划产量',
            type: 'bar',
            data: data.planned,  // 计划产量数据
          },
          {
            name: '计划产量',
            type: 'line',
            data: data.actual,  // 计划产量数据
            itemStyle:{
                color:'#FF9800'
            }
          },
          {
            name: '实际产量',
            type: 'bar',
            data: data.actual,  // 实际产量数据
          },
        ],
      };
      myChart.value.setOption(option);
    } catch (error) {
      console.error('获取计划与实际产量对比数据失败:', error);
    }
  };

    // 设置生产进度的总数和已生产数量假数据
    const total:number = 0;
    const produced:number = 0;

  const ProgressRing = async (myChart: any,chartRef:any) => {
    try {
     myChart.value = echarts.init(chartRef.value);
     const data :any = await getPlanVsActualData();
      console.log('hh',Number(data.OrderPlanQuantity));
      const option = {
        title: {
          text: '生产进度',
          subtext: `已生产 ${Number(data.orderOutput)} / 计划 ${Number(data.OrderPlanQuantity)}`,
          x: 'center',
          textStyle: {
            fontSize: 18,
            fontWeight: 'bold',
            color: '#ffffff',
          },
          subtextStyle: {
            fontSize: 14,
            color: '#ffffff',
          },
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
        },
        series: [
          {
            name: '生产进度',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold',
              },
            },
            data: [
              {
                value: Number(data.orderOutput),
                name: '已生产',
                itemStyle: {
                  color: '#4caf50',
                },
              },
              {
                value: Number(data.OrderPlanQuantity) - Number(data.orderOutput),
                name: '剩余',
                itemStyle: {
                  color: '#e0e0e0',
                },
              },
            ],
          },
        ],
      };
      myChart.value.setOption(option);
    } catch (error) {
      console.error('获取计划与实际产量对比数据失败:', error);
    }
  };

  // 模拟工序数据（数组形式传入）
  const processData = reactive({
    StationDatas: [] as any[],
  });
  
  // 页面加载时获取数据
 onMounted(() => {
    
    updateTime(); // 初始化时间
    setInterval(updateTime, 1000); // 每秒更新时间
    
      // 获取计划与实际数据
    fetchPlanVsActualData(chart1,controlChart1);  // 获取计划与实际产量对比数据
    ProgressRing(chart2,controlChart2);
  });

  onUnmounted(()=>{
    ClearLineData();
  })

  </script>
  
  <style scoped>
  #dashboard {
    background-color: rgb(46, 8, 239);
    text-align: center;
    padding: 20px;
    min-height: 100vh;
  }


.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, #1e3a8a, #2563eb);
  padding: 10px 20px;
  color: #ffffff;
  font-family: "Arial", sans-serif;
  border-bottom: 2px solid #0f172a;
}

.header-left h1 {
  font-size: 24px;
  font-weight: bold;
  margin: 0;
}

.header-center p {
  font-size: 16px;
  margin: 0;
  color: #ffffffb3;
}

.header-right p {
  font-size: 14px;
  margin: 0;
  text-align: right;
  color: #e5e7eb;
}

.header-right button {
  font-size: 16px;
  margin: 0;
  margin-right: 0;
  text-align: right;
  color: #e5e7eb;
  background-color: #2563eb;
}

  .card {
    /* background-color: #f9f9f9; */
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
  
  .quantity {
    font-size: 2em;
    font-weight: bold;
    color: white;
  }
  
  h1, h2 {
    color: white;
  }
  
  v-chart {
    width: 100%;
    
    max-width: 900px;
    margin: 0 auto;
  }

  .chart-container {
  display: flex; /* 使用 Flexbox 布局 */
  height: auto;
  justify-content: space-between; /* 子元素之间有空隙 */
  gap: 20px; /* 子元素之间的间隙 */
  flex-wrap: wrap;
}
.cool-border {
    flex: 1;
    /* //padding: 20px;
    //background-color: white; */
    width: 300px;
  height: 400px;
  background: inherit; /* 背景与外层一致 */
  color: #fff; /* 内容文字颜色 */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 18px;
  font-family: Arial, sans-serif;
  justify-content: space-between;
  gap: 2%;
  /* 动态边框效果 */
  border: 5px solid transparent;
  border-radius: 8px;
  border-image: linear-gradient(90deg, #00f5ff, #7600ff, #00f5ff);
  border-image-slice: 1;

  /* 动画效果 */
  position: relative;
  animation: border-animation 3s linear infinite;
}

/* 动态背景移动效果 */
@keyframes border-animation {
  0% {
    border-image-source: linear-gradient(0deg, #00f5ff, #7600ff, #00f5ff);
  }
  100% {
    border-image-source: linear-gradient(360deg, #00f5ff, #7600ff, #00f5ff);
  }
}

.div2 {
    
    flex: 1;
    /* background-color: #add8e6;
    padding: 20px; */
}

.chart {
  width: 48%; /* 每个图表占容器宽度的 48% */
  /* 如果你希望图表有一些默认的样式，可以加上下面的设置 */
  /* border: 1px solid #ddd; 
  border-radius: 8px; */
  height: 80%;
  padding: 2%;
  margin-left: 1%;
  justify-content: space-between; /* 子元素之间有空隙 */
  gap: 20px; /* 子元素之间的间隙 */
  display: flex; /* 使用 Flexbox 布局 */
  
}
.chart2 {
  /* 如果你希望图表有一些默认的样式，可以加上下面的设置 */
  border: 1px solid #ddd; 
  border-radius: 8px;
  height: 80%;
  padding: 2%;
  width: 78%;
  flex: 1 1 calc(78% - 1%);
  margin-left: 1%;
  box-sizing: border-box;
}

.chart3 {
  /* width: 30%; 每个图表占容器宽度的 48% */
  /* 如果你希望图表有一些默认的样式，可以加上下面的设置 */
  /* border: 1px solid #ddd; 
  border-radius: 8px; */
  width: 48%;
  flex: 1 1 calc(48% - 1%);
  height: 80%;
  padding: 2%;
  margin-left: 1%;
  justify-content: space-between; /* 子元素之间有空隙 */
  gap: 20px; /* 子元素之间的间隙 */
  display: flex; /* 使用 Flexbox 布局 */
  
}

.data-display {
  background: #1a2b3c;
  padding: 15px;
  border-radius: 8px;
  margin-right: 1%;
  width: 28%;
  height: 80%;
}

.data-display h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
  color: #00f5ff;
}

.data-display ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.data-display li {
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
}

.data-display strong {
  color: #00f5ff;
}

.table-container {
  width: 100%;
  margin: 20px 0;
  padding: 10px;
  background: #1a2b3c;
  border-radius: 8px;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

h3 {
  text-align: center;
  margin-bottom: 10px;
  color: #00f5ff;
}

.scrollable-table {
  max-height: 320px; /* 限制表格容器最大高度 */
  overflow-y: auto; /* 添加纵向滚动条 */
  border: 1px solid #ddd;
  border-radius: 8px;
}

/* 自定义滚动条样式（可选） */
.scrollable-table::-webkit-scrollbar {
  width: 8px;
  background-color: #243547; /* 滚动条背景 */
}

.scrollable-table::-webkit-scrollbar-thumb {
  background-color: #00f5ff; /* 滚动条滑块 */
  border-radius: 4px;
}

.key-process-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

.key-process-table th,
.key-process-table td {
  padding: 8px 12px;
  border: 1px solid #ddd;
}

.key-process-table th {
  background: #2e3d4d;
  color: #00f5ff;
  font-weight: bold;
}

.key-process-table tr:nth-child(even) {
  background: #243547;
}

.key-process-table tr:nth-child(odd) {
  background: #1a2b3c;
}

.key-process-table tr:hover {
  background: #00f5ff33;
}

.module {
  background-color: #0d1117; /* 深色背景 */
  border: 2px solid #1e90ff; /* 边框颜色和宽度 */
  border-radius: 10px; /* 圆角 */
  box-shadow: 0 0 10px rgba(30, 144, 255, 0.7); /* 发光效果 */
  color: #ffffff; /* 字体颜色 */
  margin: 20px;
  padding: 15px;
  width: 300px; /* 宽度可以调整 */
  position: relative; /* 使标题能够放置在上层 */
}

/* 模块标题样式 */
.module-header {
  background-color: #1e90ff; /* 标题背景颜色 */
  padding: 10px;
  border-top-left-radius: 8px; /* 左上角圆角 */
  border-top-right-radius: 8px; /* 右上角圆角 */
  text-align: center; /* 标题居中 */
  font-size: 16px;
  font-weight: bold;
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3); /* 添加阴影 */
}

/* 模块内容样式 */
.module-content {
  padding: 15px;
  font-size: 14px;
  line-height: 1.5;
}

/* 列表项样式 */
.module-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.module-content ul li {
  text-align: center; /* 列表内容右对齐 */
  border-bottom: 1px solid #444; /* 每行加下划线 */
  padding: 5px 0;
  font-size: medium;
  color: rgb(47, 255, 99);
}
</style>
  